<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="area"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup>
import { props } from 'uview-ui/libs/mixin/mixin'
import { ref, onMounted } from 'vue'
//接收父组件传递的数据
const listData=defineProps({
	parentData:Array,
	default:[]
})
console.log(listData)

// 图表数据响应式引用
const chartData = ref({})

// 图表配置项
const opts = ref({
  color: ["#EE6666"],
  padding: [15,15,0,15],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    gridType: "dash",
    dashLength: 0
  },
  extra: {
    area: {
      type: "curve",
      opacity: 0.2,
      addLine: true,
      width: 0,
      gradient: false,
      activeType: "hollow"
    }
  }
})

// 生命周期钩子
onMounted(() => {
  getServerData()
})

// 获取数据方法
const getServerData = () => {
  setTimeout(() => {
    const res = {
      categories: ["00:00","06:00","12:00","18:00","00:00"],
      series: [
        {
          name: "心率折线",
          // data:listData.parentData
		  data:[77,81,79,88,99]
        }
      ]
    }
    // 使用 JSON 处理保持响应性
    chartData.value = JSON.parse(JSON.stringify(res))
  }, 500)
}
</script>

<style scoped>
.charts-box {
	margin-top: 30rpx;
  width:100%;
  height:400rpx;
}
</style>